<template>
  <div class="ai-model-detail min-h-screen bg-base-100">
    <!-- 面包屑导航 -->
    <div class="bg-base-200 py-4 px-4">
      <div class="container mx-auto max-w-7xl">
        <div class="text-sm breadcrumbs">
          <ul>
            <li>
              <router-link to="/ai-models" class="link link-hover">
                <PhRobot :size="16" class="mr-1" />
                AI 模型库
              </router-link>
            </li>
            <li>
              <span class="font-semibold">{{ modelInfo?.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="container mx-auto max-w-7xl px-4 py-8">
      <div v-if="modelInfo" class="flex gap-6 flex-col lg:flex-row">
        <!-- 左侧菜单 -->
        <aside class="w-full lg:w-64 flex-shrink-0">
          <div class="card bg-base-200 shadow-xl sticky top-4">
            <div class="card-body p-4">
              <!-- 模型头部信息 -->
              <div class="text-center pb-4 border-b border-base-300">
                <div class="text-5xl mb-3">{{ modelInfo.icon }}</div>
                <h2 class="font-bold text-lg">{{ modelInfo.name }}</h2>
                <p class="text-sm text-base-content/60">{{ modelInfo.provider }}</p>
              </div>

              <!-- 功能菜单 -->
              <div class="mt-4">
                <h3 class="text-xs font-semibold text-base-content/60 mb-2 px-2">功能列表</h3>
                <ul class="menu menu-compact p-0">
                  <li v-for="feature in modelInfo.featureList" :key="feature.id" class="mb-1">
                    <a
                      :class="[
                        'flex items-center gap-2',
                        selectedFeature === feature.id
                          ? 'active bg-primary text-primary-content'
                          : '',
                      ]"
                      @click="selectFeature(feature.id)"
                    >
                      <component :is="feature.icon" :size="18" />
                      <span>{{ feature.name }}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </aside>

        <!-- 右侧面板 -->
        <main class="flex-1 min-w-0">
          <div class="card bg-base-200 shadow-xl">
            <div class="card-body">
              <!-- 动态加载对应的面板组件 -->
              <component :is="currentPanel" v-if="currentPanel" />

              <!-- 未找到面板 -->
              <div v-else class="text-center py-12">
                <PhWarning :size="64" class="mx-auto text-warning mb-4" />
                <p class="text-lg">该功能面板正在开发中...</p>
              </div>
            </div>
          </div>
        </main>
      </div>

      <!-- 模型不存在 -->
      <div v-else class="text-center py-20">
        <PhRobot :size="80" class="mx-auto text-base-content/30 mb-4" />
        <p class="text-xl text-base-content/50 mb-4">模型不存在</p>
        <router-link to="/ai-models" class="btn btn-primary"> 返回模型库 </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { PhRobot, PhWarning, PhImage, PhSparkle, PhPalette } from '@phosphor-icons/vue'

// 静态导入所有面板组件
const TextToImagePanel = defineAsyncComponent(
  () => import('@/components/ai-panels/minimax/TextToImagePanel.vue'),
)

const route = useRoute()
const router = useRouter()

/**
 * 模型功能接口
 */
interface ModelFeature {
  id: string
  name: string
  icon: any
  panelPath: string
}

/**
 * 模型信息接口
 */
interface ModelInfo {
  id: string
  name: string
  provider: string
  icon: string
  featureList: ModelFeature[]
}

/**
 * 模型配置（模拟数据，实际可以从API获取）
 */
const modelConfigs: Record<string, ModelInfo> = {
  'minimax-image-01': {
    id: 'minimax-image-01',
    name: 'MiniMax 文生图',
    provider: 'MiniMax',
    icon: '🎨',
    featureList: [
      {
        id: 'text-to-image',
        name: '文生图',
        icon: PhImage,
        panelPath: 'minimax/TextToImagePanel',
      },
      // 可以添加更多功能
      // {
      //   id: 'style-transfer',
      //   name: '风格迁移',
      //   icon: PhPalette,
      //   panelPath: 'minimax/StyleTransferPanel',
      // },
    ],
  },
}

/**
 * 当前模型信息
 */
const modelId = computed(() => route.params.id as string)
const modelInfo = computed(() => modelConfigs[modelId.value])

/**
 * 选中的功能
 */
const selectedFeature = ref('')

/**
 * 面板组件映射
 */
const panelComponents: Record<string, any> = {
  'minimax/TextToImagePanel': TextToImagePanel,
  // 可以在这里添加更多面板组件
  // 'minimax/StyleTransferPanel': StyleTransferPanel,
}

/**
 * 当前面板组件
 */
const currentPanel = computed(() => {
  if (!modelInfo.value || !selectedFeature.value) return null

  const feature = modelInfo.value.featureList.find((f) => f.id === selectedFeature.value)
  if (!feature) return null

  // 从映射中获取面板组件
  return panelComponents[feature.panelPath] || null
})

/**
 * 选择功能
 */
const selectFeature = (featureId: string) => {
  selectedFeature.value = featureId
}

/**
 * 组件挂载
 */
onMounted(() => {
  if (!modelInfo.value) {
    console.error('模型不存在:', modelId.value)
    return
  }

  // 默认选择第一个功能
  if (modelInfo.value.featureList.length > 0) {
    selectedFeature.value = modelInfo.value.featureList[0].id
  }

  console.log('🎨 AI 模型使用页加载完成:', modelInfo.value.name)
})
</script>

<style scoped lang="scss">
.ai-model-detail {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
